<div class="wrap">
    <i class="arrow left" nz-icon nzType="left" nzTheme="outline" (click)="carousel.pre()"></i>
    <i class="arrow right" nz-icon nzType="right" nzTheme="outline" (click)="carousel.next()"></i>
    <nz-carousel #carousel [nzEffect]='style' [nzAutoPlay]='true' class="carouselBox">
        <div nz-carousel-content *ngFor="let item of banner,let i=index">
          <img class="imgs" src={{item.imageUrl}}>
        </div>
    </nz-carousel>
</div>


<div class="body">
    <div class="main">
        <div class="wrap2">
            <ul class="tagUl">
                <li class="tagLi active" (click)="getHotList(''); setActive($event)">{{'type.typeJX' | translate}}</li>
                <li class="tagLi" (click)="getHotList('华语'); setActive($event)">{{'type.typeCN' | translate}}</li>
                <li class="tagLi" (click)="getHotList('欧美'); setActive($event)">{{'type.typeEU' | translate}}</li>
                <li class="tagLi" (click)="getHotList('民谣'); setActive($event)">{{'type.typeMY' | translate}}</li>
                <li class="tagLi" (click)="getHotList('电子'); setActive($event)">{{'type.typeELT' | translate}}</li>
            </ul>
            <ul *ngFor="let item of hotList" class="listUl">
                <li class="listLi">
                    <div class="listName"  (click)="gotoDt(item.id)">{{item.name}}</div>
                    <div class="listTime"><i nz-icon nzType="play-circle" nzTheme="outline"></i>{{(item.playCount-item.playCount%10000)/10000}}万次</div>
                    <img src={{item.coverImgUrl}} class="listImg">
                </li>
            </ul>
        </div>
    
        <div class="wrap3">
            <form class="login" *ngIf="signInForm.isShow" #signinForm="ngForm" (submit)="signin()">
                <h2 style="color: #fff;">{{'account.title'| translate}}</h2>
                <div class="phone" style="position: relative;">
                    <label>{{'account.yourid'| translate}}</label>
                    <input nz-input type="text" [(ngModel)]="signInForm.phone" name="signInForm.phone" #phone="ngModel" style="position: absolute;left: 40px;">
                </div>
                <div class="pass" style="position: relative;">
                    <label>{{'account.password'| translate}}</label>
                    <input nz-input type="password" [(ngModel)]="signInForm.password" name="signInForm.password" #password="ngModel" style="position: absolute;left: 40px;">
                </div>
                <button type="submit" nz-button><i nz-icon nzType="login" nzTheme="outline"></i>{{'account.go'| translate}}</button>
            </form>
            
            <div *ngIf="!signInForm.isShow" class="account">
                <h3 style="color: #fff;font-size: 20px;">{{'account.title2'| translate}}</h3>
                <div class="imgBox">
                    <img class="AccountImg" src={{user.avatarUrl}}>
                </div>
                
                <div class="AccountMsg">
                    {{user.nickname}}
                    <br>
                    {{user.signature}}
                </div>
            </div>
            <button class="logoutBtn" nz-button [hidden]="signInForm.isShow" (click)="logout()"><i nz-icon nzType="logout" nzTheme="outline"></i>{{'account.out'| translate}}</button>
            <div class="hotSearch">
                <h2 style="color: #fff;background-color:#364d79 ;"><i nz-icon nzType="fire" nzTheme="outline"></i>{{'hot'|translate}}</h2>
                <ul *ngFor="let item of hotSearchList">
                    <li>{{item.searchWord}}</li>
                </ul>
            </div>
        </div>
    </div>
    
</div>

<div class="footer">
    <h2 style="color: #fff;background-color: #364d79;">{{'new'|translate}}</h2>
    <ul>
        <li *ngFor="let item of newSongs">
            <div class="playSong" (click)="playSong(item.id);getSongUrl();play()">
                <i nz-icon nzType="caret-right" nzTheme="outline"></i>
            </div>
            <nz-card nzHoverable style="width:200px;height: 300px;" [nzCover]="coverTemplate">
                <nz-card-meta nzTitle={{item.name}} nzDescription={{item.artists[0].name}}></nz-card-meta>
            </nz-card>
            <ng-template #coverTemplate>
                <img alt="example" src={{item.album.blurPicUrl}} />
            </ng-template>
        </li>
    </ul>
</div>


<app-sing-song></app-sing-song>


